
<template>
  <div ref="box" class="layouts" ondragstart="return false">
    <!-- <img
      src="~assets/img/title.png"
      alt=""
      class="layouts-header-title"
    > -->
    <header v-if="isheaderFooter" class="layouts-header">
      <div class="layouts-header-wrap">
        <div class="layouts-header-left">
          <div class="layouts-header-left-home">
            <nuxt-link to="/" style="color: #999;" @click.native="searchText=''">
              容猫首页
            </nuxt-link>
          </div>

          <div class="layouts-header-left-jump">
            <nuxt-link to="/aboutus" rel="nofollow" style="color: #504cff;">
              下载APP 888红包限时抢
            </nuxt-link>
          </div>
        </div>
        <div class="layouts-header-right">
          <div>
            <p v-if="!usename">
              <span @click="popLogin">登录</span>-
              <span @click="register">注册</span>
            </p>
            <p v-if="usename">
              <span class="username">{{ usename }}</span> |
              <span @click="ouLogin">退出</span>
            </p>
          </div>
          <div>
            <nuxt-link to="/authentication" style="color: #999;">
              容猫认证
            </nuxt-link>
          </div>
          <div>
            <nuxt-link to="/aboutus/follow" style="color: #999;">
              关于容猫
            </nuxt-link>
          </div>
          <!-- <div>
            医院工作区
          </div> -->
          <div>
            <nuxt-link to="/contactus" style="color: #999;">
              联系我们
            </nuxt-link>
          </div>
        </div>
      </div>
    </header>
    <div v-if="$route.name!=='aboutUs'&&$route.name!=='aboutus-follow'&&$route.name!=='aboutUs-follow'&&$route.name!=='contactUs'&&isheaderFooter&&$route.name!=='authentication'" class="layouts-search">
      <div class="layouts-search-wrap">
        <div class="layouts-search-left">
          <nuxt-link to="/" @click.native="searchText=''">
            <div class="layouts-logo" />
          </nuxt-link>
          <div class="layouts-search-line" />
          <div class="layouts-city" @click="ChoiceCity">
            <div class="layouts-city-text">
              {{ city }}
            </div>
            <div class="layouts-city-icon" />
            <div v-if="isCity" class="layouts-city-item-wrap">
              <div v-for="item in cityList" :key="item.name" class="layouts-city-item" @click="replaceCity(item)">
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
        <div class="layouts-search-content">
          <div class="layouts-search-contetn-wrap">
            <input v-model="searchText" type="text" class="layouts-search-contetn-input" placeholder="请输入要搜索的内容" @keyup.enter="jumpSearch">
            <div class="layouts-search-bottom" @click="jumpSearch">
              <div class="layouts-search-bottom-icon" />
            </div>
          </div>
        </div>
        <div class="layouts-association" />
      </div>
    </div>
    <nav v-if="$route.path.substring(0,7)!=='/search'&&$route.name!=='aboutUs'&&$route.name!=='aboutus-follow'&&$route.name!=='aboutUs-follow'&&$route.name!=='contactUs'&& isheaderFooter &&$route.name!=='authentication'" class="nav">
      <div class="nav-wrap">
        <div v-for="item in nav" :key="item.name" :class="{navActive : active === item.name}" @click="navTab(item)">
          <nuxt-link :to="item.target" style="color: #fff;" class="nav-item">
            {{ item.name }}
          </nuxt-link>
        </div>
      </div>
    </nav>
    <!-- <nuxt keep-alive /> -->
    <nuxt />
    <div v-if="isheaderFooter" class="layouts-four-icon">
      <div class="layouts-four-icon-box">
        <div class="layouts-four-icon-four-icon-wrap">
          <div class="layouts-four-icon-mechanism-wrap">
            <div class="layouts-four-icon-mechanism-icon" />
            <div class="layouts-four-icon-mechanism-text">
              正规机构
            </div>
          </div>
          <div class="layouts-four-icon-doctor-wrap">
            <div class="layouts-four-icon-doctor-icon" />
            <div class="layouts-four-icon-doctor-text">
              专业名医
            </div>
          </div>
          <div class="layouts-four-icon-diary-wrap">
            <div class="layouts-four-icon-diary-icon" />
            <div class="layouts-four-icon-diary-text">
              真人日记
            </div>
          </div>
          <div class="layouts-four-icon-refund-wrap">
            <div class="layouts-four-icon-refund-icon" />
            <div class="layouts-four-icon-refund-text">
              随时退款
            </div>
          </div>
        </div>
      </div>
    </div>
    <div ref="meng" />
    <!-- 登录注册弹窗 -->
    <div v-if="shadowShow" class="shadow-box">
      <div class="shadow-bg">
        <div class="Loginleft">
          <img src="~assets/img/loginImg.png">
        </div>
        <div class="Loginright">
          <p class="clock">
            <span @click="closePop">×</span>
          </p>
          <div class="phoneLogin">
            <p>{{ loginTitle }}</p>
            <p :class="line" />
          </div>
          <div class="oinLogin">
            <p class="telLogin">
              <input v-model="logins.auth_identify" type="text" placeholder="手机号" @keyup="inputChange">
            </p>
            <p class="yzmLogin">
              <input v-model="logins.code" type="text" placeholder="验证码" @keyup="inputChangeYzm">
              |<span class="get-code" @click="getCode">{{ codeMsg }}</span>
            </p>
          </div>
          <div class="btnBox">
            <P class="btnLogin" @click="login">
              {{ loginBtn }}
            </P>
          </div>
          <div class="noneNum">
            <P class="gotoLogin">
              <span>还没有账号？</span>
              <span class="gotoRegister" @click="loginChange">{{ loginBottom }}</span>
            </P>
          </div>
        </div>
      </div>
    </div>

    <footer v-if="isheaderFooter" class="layouts-footer ">
      <div v-if="isOpenWindow" ref="thiswindow" class="chat-wrap">
        <header class="header">
          <img src="~assets/img/chatLogo.png" alt="" class="chat-logo">
          <div class="chat-close" @click="chatClose">
            关闭
          </div>
        </header>
        <div v-scroll-bottom="curSession " class="chat-content">
          <!-- <img src="~assets/img/chat-return.png" alt class="header-left" @click="jumpHome"> -->
          <!-- <div class="header_title"> -->
          <!-- 容猫咨询顾问 -->
          <!-- {{ curSession.hook.user_name }}
         -->
          <!-- 容猫咨询顾问
          </div> -->
          <div v-if="curSession" class="tobot">
            <div v-for="item in curSession.messages" :key="item.id">
              <div class="time">
                {{ item.date | time }}
              </div>
              <div v-if="item.status === 'sent'" class="me">
                <div>
                  <div class="message-box">
                    <div v-if="item.content.trim()!==''">
                      <!-- eslint-disable-next-line vue/no-v-html -->
                      <div class="message-list" v-html="item.content" />
                    </div>
                    <div v-else>
                      &nbsp;
                    </div>
                  </div>
                  <img :src="curSession.user.img" alt class="photo">
                </div>
              </div>
              <div v-if="item.ext" class="customer-service">
                <div>
                  <img :src="curSession.hook.user_photo" alt class="photo">
                  <div class="message-box">
                    <div v-if="item.content.trim()!==''">
                      <!-- eslint-disable-next-line vue/no-v-html -->
                      <div class="message-list" v-html="item.content" />
                    </div>
                    <div v-else>
                      &nbsp;
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <footer class="footer">
          <!-- <div class="text-options">
            <span class="option" title="表情" @click="showEmoji">
              <svg-icon class="option-hover" icon-class="emoji" title="表情" style="pointer-events: none;" />
            </span>
            <span class="option" title="图片" @click="showPicture">
              <svg-icon class="option-hover" icon-class="picture" />
              <input v-show="false" ref="picture" type="file" @change="sendPicture">
            </span>
          </div> -->
          <textarea v-model="content" type="text" placeholder="按 Enter 发送" @keyup.enter="sendText" @blur="fixScroll" />
          <!-- <img
        src="~assets/img/Smiling-face.png"
        alt=""
        class="smiling"
      >-->
          <div class="send" @click="sendText">
            发送
          </div>
        </footer>
      </div>
      <div class="layouts-footer-wrap">
        <div class="layouts-footer-box">
          <div class="layouts-footer-one-row">
            <div class="layouts-footer-one-row-logo" />
            <div class="layouts-footer-one-row-english">
              Beijing Rongcat Tech
            </div>
            <div class="layouts-footer-one-row-customer-service">
              客服电话 400-626-2400
            </div>
            <div class="layouts-footer-one-row-company">
              北京容猫科技有限公司
            </div>
            <div class="layouts-footer-one-row-company">
              地址：北京市东城区北新桥板桥南巷7号人民美术大厦北楼4层
            </div>
          </div>
          <div class="layouts-footer-two-row">
            <div class="layouts-footer-two-row-title">
              快速访问
            </div>
            <div class="layouts-footer-two-row-item-wrap">
              <div class="layouts-footer-two-row-mall">
                <nuxt-link to="/product" style="color: #666;">
                  医美商城
                </nuxt-link>
              </div>
              <div class="layouts-footer-two-row-one-wrap">
                <nuxt-link to="/product" style="color: #666;">
                  项目
                </nuxt-link>
                <p class="layouts-footer-two-row-line" />
                <nuxt-link to="/question" style="color: #666;">
                  问答
                </nuxt-link>
              </div>
              <div class="layouts-footer-two-row-one-wrap">
                <nuxt-link to="/diary" style="color: #666;">
                  日记
                </nuxt-link>
                <p class="layouts-footer-two-row-line" />
                <nuxt-link to="/moment" style="color: #666;">
                  动态
                </nuxt-link>
              </div>
              <div class="layouts-footer-two-row-one-wrap">
                <nuxt-link to="/hospital" style="color: #666;">
                  医院
                </nuxt-link>
                <p class="layouts-footer-two-row-line" />
                <nuxt-link to="/doctor" style="color: #666;">
                  医生
                </nuxt-link>
              </div>
              <div class="layouts-footer-two-row-one-wrap">
                <nuxt-link to="/article" style="color: #666;">
                  文章
                </nuxt-link>
                <p class="layouts-footer-two-row-line" />
                <nuxt-link to="/wiki" style="color: #666;">
                  百科
                </nuxt-link>
              </div>
            </div>
          </div>
          <div class="layouts-footer-three-row">
            <div class="layouts-footer-three-row-title">
              关于
            </div>
            <div class="layouts-footer-three-row-content">
              <div>
                <nuxt-link to="/aboutus/follow" style="color: #666;">
                  关于容猫
                </nuxt-link>
              </div>
              <div>
                <nuxt-link to="/contactus" style="color: #666;">
                  联系容猫
                </nuxt-link>
              </div>

              <!-- <div>加入容猫</div> -->
            </div>
          </div>
          <div class="layouts-footer-four-row">
            <div class="layouts-footer-four-row-title">
              关注我们
            </div>
            <div class="layouts-follow" />
          </div>
          <div class="layouts-footer-five-row">
            <div class="layouts-footer-five-row-title">
              手机逛容猫
            </div>
            <div class="layouts-download" />
          </div>
        </div>
      </div>
    </footer>
    <div v-if="isheaderFooter" class="keep-on-record">
      <div class="keep-on-record-one">
        <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502038798" nofollow target="_blank">京公网安备11010502038798号</a> | 京ICP备19002049号-3 | <a href="https://img.rongcat.com/images/2020/04/28/700-4.jpeg" nofollow target="_blank">EDI-京B2-20200031</a> | <a href="https://img.rongcat.com/images/2020/04/28/700.jpeg" nofollow target="_blank">营业执照</a> | <a href="https://img.rongcat.com/images/2020/04/28/700-3.jpeg" nofollow target="_blank">广播电视节目制作许可证</a> | <a href="https://img.rongcat.com/images/2020/04/28/700-2.jpeg" nofollow target="_blank">互联网药品信息服务资格证书-（京）-经营性-2019-0051</a>
      </div>
      <div class="keep-on-record-two">
        Beijing RongCat  Technology Co.,Ltd
      </div>
    </div>
    <img v-if="tightimg" class="rightImg" src="~assets/img/zixun.png" @click="sendMessageZixun">
  </div>
</template>

<script>
import { getCityData } from '@/api/areaScreen'
import Cookies from 'js-cookie'
import { isBrowser } from '@/utils/util'
import { getUserLocation, client } from '@/utils/location'
import { watchSession } from '@/utils/watch'
import { mapGetters, mapState } from 'vuex'
import { getImId, getUserInfo } from '@/api/imchat'
import { getToken, setToken, removeToken } from '@/utils/auth'
import WebIM from '../utils/WebIM'
import Bus from '@/utils/Bus'
import { Burying } from '@/utils/burying'
import rongcatpcTwo from '../assets/img/rongcatpctwo.png'
import { sendChat, codeLogin } from '@/api/login'
import reg from '@/utils/reg'

export default {
  filters: {
    // 将日期过滤为 hour:minutes
    time(date) {
      // if (typeof date === 'string') {
      //   date = new Date(date)
      // }
      if (!date) {
        return
      }
      date = new Date(date)
      const day =
        date.getDate() > 9
          ? date.getDate().toString()
          : '0' + date.getDate().toString()
      const hour =
        date.getHours() > 9
          ? date.getHours().toString()
          : '0' + date.getHours().toString()
      const minute =
        date.getMinutes() > 9
          ? date.getMinutes().toString()
          : '0' + date.getMinutes().toString()
      if (
        new Date().toString().substr(0, 15) === date.toString().substr(0, 15)
      ) {
        return hour + ':' + minute
      } else {
        return (
          date.getFullYear() +
          '年' +
          (date.getMonth() + 1) +
          '月' +
          day +
          '日 ' +
          hour +
          ':' +
          minute
        )
      }
    }
  },
  directives: {
    // 发送消息后滚动到底部
    'scroll-bottom'(el) {
      setTimeout(function() {
        el.scrollTop += 9999
        // console.log(el)
      }, 1)
    }
  },
  data() {
    return {
      tightimg: false,
      form: {
        id: '',
        users: [],
        target_type: 'users',
        send_user: undefined,
        message: '',
        local_message: '',
        status: 'sending',
        message_type: 'txt'
      },
      logins: {
        auth_identify: '',
        code: ''
      },
      sendCodeNow: '',
      line: 'linea',
      shadowShow: false,
      count: 60,
      codeMsg: '获取验证码',
      loginTitle: '手机验证码登录',
      loginBtn: '登录',
      loginBottom: '去注册',
      timer: null,
      isOverTime: false,
      isSend: true,
      content: '',
      curSession: {},
      // user: {},
      nav: [
        {
          name: '首页',
          target: '/'
        },
        {
          name: '美Go',
          target: '/product'
        },
        {
          name: '美丽日记',
          target: '/diary'
        },
        {
          name: '医生问答',
          target: '/question'
        },
        {
          name: '变美动态',
          target: '/moment'
        },
        {
          name: '变美攻略',
          target: '/article'
        },
        {
          name: '医生',
          target: '/doctor'
        },
        {
          name: '医院',
          target: '/hospital'
        },
        {
          name: '项目大全',
          target: '/wiki'
        }
      ],
      active: '',
      isCity: false,
      cityList: [],
      city: '',
      searchText: '',
      isheaderFooter: true,
      isChat: false,
      longitude: '',
      latitude: '',
      channel: this.$route.query._channel ? this.$route.query._channel : null,
      fingerprintjs: '',
      usename: '',
      fullPath: ''
    }
  },
  computed: {
    isOpenWindow: {
      get: function() {
        //
        return this.$store.state.IM.isOpenWindow
      },
      set: function() {
      }
    },
    ...mapState('IM', {
      hook_info: 'hook_info',
      currentUser: 'currentUser',
      currentVest: 'currentVest'
      // sessions: state => state.IM.sessions,
      // currentSessionId: state => state.IM.currentSessionId
    }),
    ...mapState(['deviceType']),
    ...mapGetters('IM', {
      sessions: 'sessions',
      currentSessionId: 'currentSessionId',
      session: 'session'
    })

  },
  watch: {
    $route(newRoute) {
      this.Highlight()
      this.setCanonical()
    },
    session: function(val) {
      this.curSession = val
      const oimg = `<img style="width:120px; height:150px;" src=${rongcatpcTwo} />`
      const txt =
        `容猫医美提供专业的名医，方案设计，术后管理等服务。
您可以添加我们医美管家微信号：rongcat03，或者扫描下面二维码进行添加${oimg}

`
      const txt2 = `亲，想了解什么项目呢？
若打字比较慢？您可以留下您的联系方式，稍后给您回电！`
      if (this.curSession && JSON.stringify(this.curSession).indexOf(txt) < 0) {
        this.session.messages.push({
          content: txt,
          data: '',
          ext: {},
          type: 'txt'
        }, {
          content: txt2,
          data: '',
          ext: {},
          type: 'txt'
        })
      }
      // console.log(JSON.stringify(this.curSession), 'watch')
    }
  },
  created() {
    if (isBrowser()) {
      this.user = JSON.parse(localStorage.getItem('vuex-im-userInfo'))

      this.Highlight()
      if (localStorage.getItem('city') && localStorage.getItem('city') !== 'Nagawa') {
        this.city = localStorage.getItem('city')
      } else {
        this.city = '全国'
      }
      localStorage.setItem('unique_id', Cookies.get('unique_id'))
      this.fingerprintjs = localStorage.getItem('unique_id')
      // 只定位一次,定位到后存储到本地
      if (localStorage.getItem('city')) {
        this.longitude = localStorage.getItem('longitude') || ''
        this.latitude = localStorage.getItem('latitude') || ''
        client()
      } else {
        getUserLocation(this)
        this.longitude = localStorage.getItem('longitude') || ''
        this.latitude = localStorage.getItem('latitude') || ''
      }
      this.Authorization = getToken() ? 'Bearer ' + getToken() : ''
    }
    if (this.active === '搜索') {
      this.searchText = this.$route.params.details
    }
    if (this.$route.path.substring(0, 9) === '/activity' || this.$route.path === '/push-privacy') {
      this.active = ''
      this.isheaderFooter = false
    }
  },
  mounted() {
    if (isBrowser()) {
      getImId(Cookies.get('unique_id')).then(res => {
        getUserInfo('Bearer ' + res.data.token).then(r => {
          this.$store.dispatch('IM/onLogin', r.data.user_info)
          if (res.code === 200 && this.$route.fullPath.indexOf('up=1') > 0) {
            this.sendMessageZixun()
            document.body.style.overflow = 'hidden'
            setTimeout(() => {
              this.$refs.meng.className = 'mengbg'
              this.$refs.thiswindow.className = 'channelcss'
              // console.log(this.$refs.thiswindow)
            }, 300)
          } else {
            return
          }
        })
      })
    }
    this.setCanonical()
    Bus.$on('open', () => {
      this.sendMessageZixun()
    })
    Bus.$on('triggerTrack', val => {
      this.track(val)
    })
    setTimeout(() => {
      this.tightimg = true
    }, 1000)
  },

  methods: {
    // 退出登录
    ouLogin() {
      this.usename = ''
      removeToken()
      this.$toast.info('退出成功')
    },
    chatClose() {
      this.$store.dispatch('IM/ocWindow', false)
      document.body.style.overflow = 'auto'
      this.$refs.meng.className = ''
      this.$refs.thiswindow.className = 'chat-wrap'
    },
    sendMessageZixun() {
      console.log(this.session, this.curSession)
      this.isChat = true
      var customer = {
        user_id: 100451,
        user_name: '官方医美管家',
        user_photo: 'https://img.rongcat.com/images/2019/08/22/bdWT2tzYu7GZlPh6epfe2WrN4YZmUnPbljket0Fj.jpeg',
        hook_user_id: 100451,
        hook: {
        }
      }
      this.$store.dispatch('IM/getHookUserInfo', customer.user_id)
      this.$store.commit('IM/SET_HOOK', customer.user_id)
      this.$store.dispatch('IM/ocWindow', true).then(() => {
        this.$store.dispatch('IM/createSession', customer)
      })
    },

    sendText() {
      try {
        WebIM.then(res => {
          this.form.message = this.content.trim()
          this.form.message_type = 'txt'
          this.form.local_message = res.utils.parseEmoji(this.content)
          const to_user_id = this.currentSessionId.split('-')[1]
          this.content = ''
          this.emojiState = false
          var id = res.conn.getUniqueId()
          var msg = new res.message(this.form.message_type, id)
          const option = {
            id: id,
            msg: this.form.message,
            to: to_user_id,
            roomType: false,
            ext: {
            },
            success: function(id, serverMsgId) {
              console.log('send private text Success')
              watchSession()
            },
            fail: function(e) {
              console.log('Send private text error', e)
              alert('聊天对话框登录失败，请刷新重试！')
            }
          }
          msg.set(option)
          msg.body.chatType = 'singleChat'
          res.conn.send(msg.body)
          this.form.id = id
          // console.log(this.form)
          this.$store.dispatch('IM/sendMessage', this.form)
        })
      } catch (e) {
        console.log('发送消息::::::', e)
      }
    },
    fixScroll() {
      setTimeout(function() {
        var scrollHeight =
          document.documentElement.scrollTop || document.body.scrollTop || 0
        window.scrollTo(0, Math.max(scrollHeight - 1, 0))
      }, 100)
    },
    Highlight() {
      switch (this.$route.name) {
        case 'diary-details':
          this.active = '美丽日记'
          break
        case 'answer-details':
          this.active = '医生问答'
          break
        case 'moment-details':
          this.active = '变美动态'
          break
        case 'doctor-details':
          this.active = '医生'
          break
        case 'article-details':
          this.active = '变美攻略'
          break
        case 'hospital-details':
          this.active = '医院'
          break
        case 'wiki-details':
          this.active = '项目大全'
          break
        case 'product-details':
          this.active = '美Go'
          break
        case 'index':
          this.active = '首页'
          break
        default:
          this.nav.forEach((item) => {
            if (item.target + '/' === this.$route.path) {
              this.active = item.name
            }
          })
      }
    },
    navTab(i) {
      this.active = i.name
    },
    ChoiceCity() {
      this.isCity = !this.isCity
      getCityData().then(res => {
        this.cityList = res.data.splice(1)
      })
    },
    replaceCity(i) {
      this.city = i.name
      localStorage.setItem('city', i.name)
    },
    jumpSearch() {
      if (this.searchText !== '') {
        this.$router.push(`/search/${this.searchText}`)
      } else {
        this.$router.push(`/`)
      }
    },
    setCanonical() {
      if (!Object.keys(this.$refs).length) return
      const href = `https://rongcat.com${this.$route.fullPath}`
      const dom = document.getElementsByTagName('link')
      let state = false
      let link = null
      for (var i = 0; i < dom.length; i++) {
        if (dom[i].getAttribute('rel') === 'canonical') {
          state = true
          link = dom[i]
          link.setAttribute('href', href)
        }
      }
      if (!state) {
        link = document.createElement('link')
        link.setAttribute('rel', 'canonical')
        link.setAttribute('href', href)
        document.head.appendChild(link)
      }
    },
    track(val) {
      const { action, track_id } = val
      const BuryingData = [{
        'action': action,
        'track_id': track_id,
        'client': 'rcat_pc',
        'device_id': this.fingerprintjs,
        'network': window.navigator.connection.effectiveType,
        'lng': this.longitude,
        'lat': this.latitude,
        'ctime': (new Date()).valueOf(),
        'platform': this.deviceType.type,
        '_channel': this.channel
      }]
      Burying(BuryingData)
    },
    closePop() {
      this.shadowShow = false
    },
    // 登录逻辑
    popLogin() {
      this.shadowShow = true
      this.loginTitle = '手机验证码登录'
      this.loginBtn = '登录'
      this.loginBottom = '去注册'
      this.line = 'linea'
    },
    register() {
      this.shadowShow = true
      this.loginTitle = '注册'
      this.loginBtn = '注册'
      this.loginBottom = '去登录'
      this.line = 'lineb'
    },
    loginChange() {
      if (this.loginBtn === '注册') {
        this.loginTitle = '手机验证码登录'
        this.loginBtn = '登录'
        this.loginBottom = '去注册'
        this.line = 'linea'
      } else {
        this.loginTitle = '注册'
        this.loginBtn = '注册'
        this.loginBottom = '去登录'
        this.line = 'lineb'
      }
    },
    inputChange() {
      this.logins.auth_identify = this.logins.auth_identify.replace(/[^\d]/g, '')
    },
    inputChangeYzm() {
      this.logins.code = this.logins.code.replace(/[^\d]/g, '')
    },
    getCode() {
      if (this.checkPhone()) {
        this.countDown()
        if (this.isSend) {
          this.sendChat()
        }
      }
    },
    sendChat() {
      this.isSend = false
      sendChat(this.logins.auth_identify).then((res) => {

      })
    },
    login() {
      if (this.checkPhone()) {
        if (!this.logins.code) {
          this.$toast.info('请输入验证码')
          return false
        }
        codeLogin(this.logins).then(res => {
          if (res.code === 200) {
            this.logins.auth_identify = ''
            this.logins.code = ''
            this.shadowShow = false
            this.usename = res.data.user_info.user_info.user_name
            setToken(res.data.token)
          }
        }).catch((e) => {
          this.$toast.error(e.message)
        })
      }
    },
    checkPhone() {
      if (!this.logins.auth_identify) {
        this.$toast.info('请输入手机号')
        return false
      }
      if (!reg.phone.test(this.logins.auth_identify)) {
        this.$toast.error('请输入正确的手机号')
        return false
      }
      return true
    },
    countDown() {
      if (this.isOverTime) {
        return false
      }
      this.isOverTime = true
      if (this.count === 0) {
        this.codeMsg = '重新发送'
        this.count = 60
        this.isOverTime = false
        this.isSend = true
        clearTimeout(this.timer)
      } else {
        clearTimeout(this.timer)
        this.codeMsg = this.count + '秒重新发送'
        this.count--
        this.timer = setTimeout(() => {
          this.isOverTime = false
          this.countDown()
        }, 1000)
      }
    }
  }
}
</script>

<style  lang="scss">
.username {
  color: #999;
}
.shadow-box {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  z-index: 1000;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
}
.shadow-bg {
  width: 700px;
  height: 450px;
  position: absolute;
  z-index: 1004;
  top: 25%;
  left: 50%;
  margin-left: -350px;
  display: flex;
  margin-right: -225px;
}
.Loginleft,
.Loginright {
  width: 350px;
  height: 450px;

  img {
    width: 235px;
    height: 67px;
  }
}
.Loginright {
  background: #ffffff;
  border-radius: 0px 12px 12px 0px;

  .phoneLogin {
    margin-left: 40px;
    margin-top: 66px;
    width: 112px;
    height: 22px;
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 600;
    text-align: left;
    color: #8649ff;
    line-height: 22px;
  }
  .linea {
    width: 80px;
    height: 2px;
    border-top: 3px solid #8649ff;
  }
  .lineb {
    width: 32px;
    height: 2px;
    border-top: 3px solid #8649ff;
  }
  .oinLogin {
    width: 270px;
    height: 90px;
    margin-top: 59px;
    margin-left: 40px;
    p {
      width: 270px;
      border-bottom: 1px solid #e8e8e8;
    }
  }

  .yzmLogin {
    margin-top: 26px;
  }
}
.Loginleft {
  display: flex;
  background: #8649ff;
  border-radius: 12px 0px 0px 12px;
  justify-content: center;
  align-items: center;
}
.btnBox {
  width: 100%;
  height: 40px;
  margin-top: 30px;
  .btnLogin {
    width: 250px;
    height: 40px;
    margin: 0 auto;
    background: #8649ff;
    border-radius: 4px;
    text-align: center;
    line-height: 40px;
    color: #fff;
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 600;
    cursor: pointer;
  }
}
.noneNum {
  background: #f9f9f9;
  width: 100%;
  height: 62px;
  margin-top: 61px;
  .gotoLogin {
    margin-top: 21px;
    width: 135px;
    height: 20px;
    margin: 0 auto;
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #999999;
    line-height: 62px;
  }
  .gotoRegister {
    color: #8649ff;
    cursor: pointer;
  }
}
.get-code {
  cursor: pointer;
  font-size: 12px;
  color: #8649ff;
  margin-left: 9px;
}
.clock {
  width: 100%;
  height: 20px;
  span {
    float: right;
    font-size: 24px;
    width: 24px;
    height: 24px;
    margin-right: 15px;
    margin-top: 15px;
    cursor: pointer;
    font-weight: 100;
  }
}
.mengbg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background: #000;
  opacity: 0.5;
  overflow: hidden;
}
.channelcss {
  box-shadow: 0px -2px 6px 0px rgba(0, 0, 0, 0.13);
  width: 520px;
  display: flex;
  background: #fff;
  flex-direction: column;
  overflow: hidden;
  position: fixed;
  bottom: 20px;
  right: 20px;
  margin-top: 0px;
  z-index: 1000;
  position: absolute;
  left: 30%;
  bottom: 20%;
}
.rightImg {
  position: fixed;
  right: 20px;
  bottom: 210px;
  z-index: 999;
  width: 144px;
  height: 184px;
  cursor: pointer;
}
.text-options {
  // border: solid 1px #c26a3e;
  // border-top: 1px solid #f2f2f2;
  width: 100%;
  z-index: 1;
  // position: absolute;
  // bottom: 135px;
  // left: 5px;
  height: 25px;
  line-height: 25px;
}
.chat-wrap {
  box-shadow: 0px -2px 6px 0px rgba(0, 0, 0, 0.13);
  width: 520px;
  display: flex;
  background: #fff;
  flex-direction: column;
  overflow: hidden;
  position: fixed;
  bottom: 20px;
  right: 20px;
  margin-top: 0px;
  z-index: 1000;
}
.header {
  width: 100%;
  height: 52px;
  background: #b197ff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  .header-left {
    width: 28px;
    height: 28px;
    margin-left: 25px;
  }
  .header_title {
    font-size: 17px;
    font-weight: 600;
    color: rgba(51, 51, 51, 1);
    line-height: 24px;
    margin-left: -25px;
  }
  .chat-logo {
    width: 66px;
    height: 25px;
  }
  .chat-close {
    font-size: 14px;
    color: #fff;
  }
  .chat-close:hover {
    cursor: pointer;
  }
}
.chat-content {
  width: 100%;
  flex: 1;
  padding: 0 14px;
  height: 260px;
  min-height: 260px;
  overflow: scroll;
  background: #f6f6f6;
  > div {
    height: 300px;
    // overflow: scroll;
    display: flex;
    flex-direction: column;
  }
}
.footer {
  width: 100%;
  height: 50px;
  position: relative;
  background: #fff;
  display: flex;
  align-items: center;
  textarea {
    background: #f2f2f2ff;
    box-sizing: border-box;
    outline: none;
    height: 110px;
    border: none;
    width: 100%;
    padding: 10px;
    outline: none;
    resize: none;
  }
}

.time {
  text-align: center;
  margin: 16px 0;
}
.me {
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
  > div {
    display: flex;
    align-items: center;
    align-self: flex-end;
    .message-box {
      padding-left: 18px;
      padding-right: 11px;
      margin-right: 10px;
      background: rgba(80, 76, 255, 0.1);
      border-radius: 19px 2px 19px 19px;
      display: flex;
      align-items: center;
    }
  }
  .photo {
    width: 37px;
    height: 37px;
    border-radius: 10px;
    display: inline-block;
    align-self: flex-start;
  }
}

.customer-service {
  display: flex;
  flex-direction: column;
  margin-bottom: 50px;
  > div {
    display: flex;
    align-items: center;
    align-self: end;
    .message-box {
      max-width: 300px;
      margin-left: 10px;
      background: rgba(255, 255, 255, 1);
      border-radius: 2px 19px 19px 19px;
      padding-left: 18px;
      padding-right: 11px;
      display: flex;
      align-items: center;
    }
  }
  .photo {
    width: 37px;
    height: 37px;
    border-radius: 10px;
    align-self: flex-start;
  }
}
.smiling {
  width: 26px;
  height: 26px;
}
.emoji {
  vertical-align: middle;
  height: 25px;
}
.send {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 60px;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  color: #ffffff;
  border: 1px solid #409eff;
  -webkit-tap-highlight-color: transparent;
  background-color: #409eff;
  outline: none;
  cursor: pointer;
  border-radius: 2px;
  text-align: center;
}
html {
  font-family: PingFang SC, Microsoft YaHei, Helvetica Neue, Helvetica, Segoe UI,
    Hiragino Sans GB, Arial, sans-serif;
  word-spacing: 1px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  overflow-x: hidden !important;
}
html,
body {
  width: 100%;
  height: 100%;
  touch-action: pan-y;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
}
input {
  outline: none;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"] {
  -moz-appearance: textfield;
}
.layouts {
  width: 100%;
}
.layouts-header-title {
  width: 100%;
  display: block;
}
a {
  text-decoration: none;
  color: #333;
}
.layouts-header {
  width: 100%;
  height: 40px;
  background: rgba(246, 246, 246, 1);
  .layouts-header-wrap {
    width: 1190px;
    height: 40px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 400;
    line-height: 17px;
    .layouts-header-left {
      display: flex;
    }
    .layouts-header-left-jump {
      margin-left: 28px;
      color: #504cff;
    }
    .layouts-header-left-jump:hover {
      cursor: pointer;
    }
    .layouts-header-left-home:hover {
      cursor: pointer;
    }
    .layouts-header-right {
      display: flex;
      > div {
        margin-left: 28px;
      }
      > div:hover {
        cursor: pointer;
      }
    }
  }
}
.layouts-search {
  width: 100%;
  .layouts-search-wrap {
    width: 1190px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }
}
.layouts-logo:hover {
  cursor: pointer;
}
.layouts-logo {
  width: 130px;
  height: 40px;
  background: url("~assets/img/logo.png") center center no-repeat;
  background-size: 100% 100%;
}
.layouts-city {
  height: 26px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.04);
  border-radius: 13px;
  margin-top: 7px;
  display: flex;
  align-items: center;
  position: relative;
  .layouts-city-item-wrap {
    width: 300px;
    display: flex;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 1);
    border-radius: 13px;
    border: 1px solid rgba(246, 246, 246, 1);
    padding-left: 24px;
    padding-top: 15px;
    position: absolute;
    top: 37px;
    z-index: 9;
    .layouts-city-item {
      width: 18%;
      margin-right: 17px;
      font-size: 12px;
      font-weight: 400;
      padding-bottom: 12px;
      color: rgba(102, 102, 102, 1);
      line-height: 17px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .layouts-city-item:hover {
      cursor: pointer;
    }
  }
}
.layouts-city:hover {
  cursor: pointer;
}
.layouts-search-left {
  display: flex;
  align-items: center;
  margin-top: 32px;
}
.layouts-search-line {
  width: 2px;
  height: 30px;
  background: rgba(246, 246, 246, 1);
  border-radius: 1px;
  margin-left: 17px;
  margin-right: 18px;
}
.layouts-city-text {
  height: 20px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(80, 76, 255, 1);
  line-height: 20px;
  margin-left: 24px;
}
.layouts-city-icon {
  width: 9px;
  height: 6px;
  background: url("~assets/img/down-icon.png") center center no-repeat;
  background-size: 100% 100%;
  margin-left: 20px;
  margin-right: 20px;
}
.layouts-search-content {
  width: 536px;
  height: 40px;
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
  border: 1px solid rgba(237, 237, 237, 1);
  margin-top: 32px;
  display: flex;
  align-items: center;
  .layouts-search-contetn-input {
    width: 432px;
    height: 20px;
    font-size: 14px;
    margin-left: 10px;
    border: 0;
  }
  .layouts-search-contetn-input::-webkit-input-placeholder {
    font-size: 14px;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    line-height: 20px;
  }
  .layouts-search-contetn-wrap {
    display: flex;
    align-items: center;
  }
  .layouts-search-bottom {
    width: 94px;
    height: 40px;
    background: rgba(80, 76, 255, 1);
    border-radius: 0px 4px 4px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    .layouts-search-bottom-icon {
      width: 18px;
      height: 18px;
      background: url("~assets/img/search-icon.png") center center no-repeat;
      background-size: 100% 100%;
    }
  }
}
.layouts-association {
  width: 162px;
  height: 40px;
  background: url("~assets/img/layouts-association.png") center center no-repeat;
  background-size: 100% 100%;
  margin-top: 32px;
}
.nav {
  width: 100%;
  height: 50px;
  background: rgba(255, 255, 255, 1)
    linear-gradient(
      270deg,
      rgba(67, 92, 255, 0.5) 0%,
      rgba(151, 128, 255, 1) 100%
    );
  margin-top: 30px;
  .nav-wrap {
    width: 1190px;
    height: 50px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .nav-item {
    width: 132px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
  }
  .nav-item:hover {
    background: rgba(105, 105, 224, 1);
    cursor: pointer;
  }
  .navActive {
    background: rgba(105, 105, 224, 1);
    font-weight: 600;
  }
}
.layouts-four-icon {
  width: 100%;
  height: 128px;
  background: #fff;
  border-bottom: 1px solid rgba(246, 246, 246, 1);
  .layouts-four-icon-box {
    width: 1190px;
    height: 128px;
    margin: 0 auto;
    display: flex;
    align-items: center;
  }
  .layouts-four-icon-four-icon-wrap {
    width: 100%;
    display: flex;
    justify-content: space-around;
  }
  .layouts-four-icon-mechanism-wrap {
    height: 80px;
    display: flex;
    align-items: center;
  }
  .layouts-four-icon-mechanism-icon {
    width: 80px;
    height: 80px;
    background: url("~assets/img/mechanism-icon.png") center center no-repeat;
    background-size: 100% 100%;
  }
  .layouts-four-icon-mechanism-text {
    font-size: 14px;
    font-weight: 400;
    color: rgba(80, 76, 255, 1);
    line-height: 20px;
    margin-left: 10px;
  }
  .layouts-four-icon-doctor-wrap {
    height: 80px;
    display: flex;
    align-items: center;
  }
  .layouts-four-icon-doctor-icon {
    width: 80px;
    height: 80px;
    background: url("~assets/img/doctor-icon.png") center center no-repeat;
    background-size: 100% 100%;
  }
  .layouts-four-icon-doctor-text {
    font-size: 14px;
    font-weight: 400;
    color: rgba(80, 76, 255, 1);
    line-height: 20px;
    margin-left: 10px;
  }
  .layouts-four-icon-diary-wrap {
    height: 80px;
    display: flex;
    align-items: center;
  }
  .layouts-four-icon-diary-icon {
    width: 80px;
    height: 80px;
    background: url("~assets/img/diary-icon.png") center center no-repeat;
    background-size: 100% 100%;
  }
  .layouts-four-icon-diary-text {
    font-size: 14px;
    font-weight: 400;
    color: rgba(80, 76, 255, 1);
    line-height: 20px;
    margin-left: 10px;
  }
  .layouts-four-icon-refund-wrap {
    height: 80px;
    display: flex;
    align-items: center;
  }
  .layouts-four-icon-refund-icon {
    width: 80px;
    height: 80px;
    background: url("~assets/img/refund-icon.png") center center no-repeat;
    background-size: 100% 100%;
  }
  .layouts-four-icon-refund-text {
    font-size: 14px;
    font-weight: 400;
    color: rgba(80, 76, 255, 1);
    line-height: 20px;
    margin-left: 10px;
  }
}
.layouts-footer {
  width: 100%;
  height: 243px;
  background: #fff;
  border-bottom: 1px solid rgba(246, 246, 246, 1);
  .layouts-footer-wrap {
    width: 1190px;
    height: 243px;
    margin: 0 auto;
    overflow: hidden;
  }
  .layouts-footer-box {
    width: 1190px;
    height: 243px;
    margin-top: 35px;
    display: flex;
    justify-content: space-around;
  }
  .layouts-footer-one-row-logo {
    width: 130px;
    height: 40px;
    background: url("~assets/img/logo.png") center center no-repeat;
    background-size: 100% 100%;
  }
  .layouts-footer-one-row-english {
    font-size: 14px;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    line-height: 20px;
    margin-top: 25px;
  }
  .layouts-footer-one-row-customer-service {
    font-size: 14px;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    line-height: 20px;
    margin-top: 10px;
  }
  .layouts-footer-one-row-company {
    font-size: 14px;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    line-height: 20px;
    margin-top: 10px;
    width: 200px;
  }
  // .layouts-footer-two-row {
  //   // margin-left: 274px;
  // }
  .layouts-footer-two-row-title {
    font-size: 18px;
    font-weight: 600;
    color: rgba(51, 51, 51, 1);
    line-height: 25px;
  }
  .layouts-footer-two-row-mall {
    font-size: 14px;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    line-height: 20px;
    margin-top: 10px;
  }
  .layouts-footer-two-row-mall:hover {
    cursor: pointer;
  }
  .layouts-footer-two-row-one-wrap {
    margin-top: 10px;
    display: flex;
    align-items: center;
    > a {
      font-size: 14px;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      line-height: 20px;
    }
  }
  .layouts-footer-two-row-line {
    width: 1px;
    height: 14px;
    margin-left: 4px;
    margin-right: 4px;
    background: #999;
  }
  .layouts-footer-three-row {
    width: 56px;
    // margin-left: 98px;
    text-align: center;
    .layouts-footer-three-row-title {
      font-size: 18px;
      font-weight: 600;
      color: rgba(51, 51, 51, 1);
      line-height: 25px;
    }
    .layouts-footer-three-row-content {
      font-size: 14px;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      line-height: 20px;
      > div {
        margin-top: 10px;
        color: #666;
      }
      > div:hover {
        cursor: pointer;
      }
    }
  }
  .layouts-footer-four-row {
    width: 120px;
    // margin-left: 100px;
    text-align: center;
    .layouts-footer-four-row-title {
      font-size: 18px;
      font-weight: 600;
      color: rgba(51, 51, 51, 1);
      line-height: 25px;
    }
    .layouts-follow {
      width: 120px;
      height: 120px;
      margin-top: 10px;
      background: url("~assets/img/follow-code.png") center center no-repeat;
      background-size: 100% 100%;
    }
  }
  .layouts-footer-five-row {
    width: 120px;
    // margin-left: 81px;
    text-align: center;
    .layouts-footer-five-row-title {
      font-size: 18px;
      font-weight: 600;
      color: rgba(51, 51, 51, 1);
      line-height: 25px;
    }
    .layouts-download {
      width: 120px;
      height: 120px;
      margin-top: 10px;
      background: url("~assets/img/download-code.png") center center no-repeat;
      background-size: 100% 100%;
    }
  }
}
.keep-on-record {
  width: 100%;
  height: 81px;
  overflow: hidden;
  text-align: center;
  .keep-on-record-one {
    font-size: 12px;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    line-height: 17px;
    margin-top: 24px;
    a {
      color: rgba(102, 102, 102, 1);
    }
  }
  .keep-on-record-two {
    font-size: 12px;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    line-height: 17px;
  }
}
.tobot {
  margin-bottom: 20px;
}

.top-center .toasted.toasted-primary.info {
  width: 281px;
  height: 42px;
  background: #ffffff;
  border-radius: 6px;
  line-height: 20px;
  color: #ff86a2;
  font-weight: 400;
  font-size: 14px;
}
//loadingCss
.customLoading {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  text-align: center;
  display: flex;
  justify-content: center;
  i {
    color: rgb(32, 160, 255);
    font-size: 30px;
  }
}

/*旋转加载条*/
.refleash {
  width: 32px;
  height: 32px;
  margin-top: 100px;
  animation: refleashRotate 1s linear infinite;
}

@keyframes refleashRotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.message-list img {
  width: 100px;
  height: auto;
}
</style>
